<template>
    <view>
        <h3 style="text-align: center;padding: 20rpx 0;">图片懒加载、预加载组件</h3>
        <view class="list">
            <view class="item" v-for="(item,index) of list" :key="index">
                <easy-loadimage
                    :scroll-top="scrollTop"
                    :image-src="item.image" 
                    :open-transition="true"></easy-loadimage>
                <text>{{item.content}}</text>
            </view>
        </view>
    </view>
</template>
<script>
    import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
    const MockData = require('@/static/easy-loadimage/mock-data.json')
    export default{
        components:{easyLoadimage},
        data(){
            return {
                list:MockData,
                scrollTop:0
            }
        },
        onPageScroll({scrollTop}) {
            // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
            this.scrollTop = scrollTop;
        },
    }
</script>
<style scoped>
    .list{display: flex;justify-content: space-between;flex-wrap: wrap;padding: 32rpx;background: #F1F1F1;}
    .list .item{width: 48%;background: #fff;margin-bottom: 80rpx;border-radius: 20rpx;}
    .list .item >>> image.origin-img{
        width: 100%;
        border-radius: 20rpx;
        margin-bottom: 38rpx;
    }
</style>